<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="line" style="height: 400px"></div>
	<script src="echarts/echarts.js"></script>
	<script>
        //light  dark 无效
		var myChart=echarts.init(document.querySelector('#line'),'dark');
        var option={
            // backgroundColor:'#2c343c',
            color:['red','green', 'blue'],//全局调色盘
            textStyle:{//文本的颜色可以全局设置
                color:'rgba(0,0,0,0.3)'
            },
            series:[
                {
                    color:['yellow','lightblue','pink'],//此系列自己的调色盘
                    name:'访问来源',
                    type:'pie',
                    radius:'55%',
                    data:[
                       {value:235, name:'视频广告',
                       itemStyle:{
                        color:'red' //无效
                       }
                   },
                        {value:274, name:'联盟广告', itemStyle:{
                        color:'red'
                       }},
                        {value:310, name:'邮件营销'},
                        {value:335, name:'直接访问'},
                        {value:400, name:'搜索引擎'}
                    ],
                    roseType:'angle',//南丁格尔图   会通过半径表示数据大小
                    itemStyle:{
                        normal:{//item normal
                            shadowBlur:200,
                            shadowOffsetX:0,
                            shadowOffsetY:0,
                            shadowColor:'red',
                            // color:'blue'//扇形的颜色
                        },
                        emphasis:{// item  高亮
                            shadowBlur:200,
                            shadowColor:'rgba(0,0,0,0.5)'
                        }
                    },
                    label:{
                       normal:{
                            textStyle:{//可以在单个系列中设置颜色
                                color:'gold'
                            }
                       },
                       emphasis:{//emphasis 重点，加强语气
                            color:'lightblue'
                       }
                    },
                    labelLine:{
                        normal:{
                            lineStyle:{
                                color:'lightblue'
                            }
                        },
                        emphasis:{
                            lineStyle:'red'
                        }
                    }
                   
                }
            ],
            visualMap:{
                // 不显示visualMap组件，只用于明暗度的映射
                show:false,
                min:200,
                max:600,
                inRange:{//明暗度的范围0-1
                    // colorLightness:[0,1]
                }
            }
        }
        myChart.setOption(option)
	</script>
</body>
</html>